<template>
<div class="msg-follow">
  <div class="follow-title">
    <div class="tit-le">
      <i @click="$router.go(-1)" class="iconfont icon-arrow-right"></i>
    </div>
    <div class="tit-rg">
      <span>{{title}}</span>
    </div>
  </div>
  <div class="follow-body">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      :description="text"
      v-show="empty"
    />
    <div class="fans" v-if="fans">
      <div class="userlist-box" v-for="(item,index) of followlist" :key="index">
        <div class="box-le">
          <div class="le-img">
            <img :src="item.user.uportrait" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>{{ item.user.username }}</span>
            <span>{{ item.user.signature }}</span>
          </div>
          <div class="rg-rg" @click="onfollow(item)">
            <div v-show="item.isfollow" class="rg-box">
              <span>√ 已关注</span>
            </div>
            <div v-show="!item.isfollow" class="rg-box-nofollow">
              <span>+ 关注</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="follow" v-if="follow">
      <div class="userlist-box" v-for="(item,index) of followlist" :key="index">
        <div class="box-le">
          <div class="le-img">
            <img :src="item.follower.uportrait" alt="">
          </div>
        </div>
        <div class="box-rg">
          <div class="rg-le">
            <span>{{ item.follower.username }}</span>
            <span>{{ item.follower.signature }}</span>
          </div>
          <div class="rg-rg">
            <div @click="removefollow(item)" class="rg-box">
              <span>√ 已关注</span>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "follow",
  data(){
    return{
      title: '',
      followlist: [],
      follow: false,
      fans: false,
      postfollow: {},
      url: '',
      data: {},
      text: '',
      empty: false,
    }
  },
  created() {
    const { release } = this.$route.params
    if( release == 'follow' ){
      this.title = '我的关注'
      this.follow = true
      this.fans = false
      this.postfollow = {}
      const uid = localStorage.getItem('uid')
      this.postfollow.uid = uid
      this.findfollow()
      this.text = '你还没有关注任何人哦'
    }
    if( release == 'fans' ){
      this.title = '我的粉丝'
      this.follow = false
      this.fans = true
      this.postfollow = {}
      const uid = localStorage.getItem('uid')
      this.postfollow.followerid = uid
      this.findfollow()
      this.text = '暂时还没有人关注你，快去涨点粉吧'
    }
  },
  methods:{
    async findfollow(){
      try {
        const res = await this.$axios({
          url:'/blog/followfind',
          method:"post",
          data: this.postfollow,
        })
        const {success, msg, data} = res.data
        if(success){
          if(data.length == 0 ){
            this.empty = true
          }else {
            this.empty = false
          }
          if(this.postfollow.followerid){
            try {
              const isfollow = await this.$axios({
                url:'/blog/followfind',
                method:"post",
                data: {
                  uid: localStorage.getItem('uid')
                },
              })
              const follows = isfollow.data.data
              data.map(r=>{
                const gz = follows.some(item=>{
                  return item.follower.uid == r.user.uid
                })
                if(gz){
                  r.isfollow = true
                }else {
                  r.isfollow = false
                }
              })
            }catch (e) {

            }
          }
          this.followlist = data;
          console.info(this.followlist)
        }
      }catch (e) {

      }
    },
    async onfollow(item){
      if(item.isfollow){
        this.url = '/blog/unfollow';
        this.data.uid = item.followerid;
        this.data.followerid = item.uid;
      }else {
        this.url = '/blog/followcreat';
        this.data.uid = item.followerid;
        this.data.followerid = item.uid;
      }
      try {
        const res = await this.$axios({
          url: this.url,
          method:"post",
          data: this.data,
        })
        const { success, msg } = res.data;
        if (success){
          item.isfollow = !item.isfollow
          Toast.success(msg)
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
    async removefollow(item){
      try {
        const res = await this.$axios({
          url: '/blog/unfollow',
          method:"post",
          data: {
            followid: item.followid
          },
        })
        const { success, msg } = res.data;
        if (success){
          Toast.success(msg)
          this.findfollow()
        }else {
          Toast.fail(msg)
        }
      }catch (e) {
        Toast.fail(e)
      }
    },
  },
}
</script>

<style scoped lang="scss">
.msg-follow{
  height: 100%;
  background-color: #f6f6f6;
  display: flex;
  flex-direction: column;
  .follow-title{
    width: 100%;
    height: vw(90);
    box-sizing: border-box;
    line-height: vw(90);
    background-color: #ffffff;
    display: flex;
    border-bottom: 1px solid #ebedf0;
    .tit-le{
      width: vw(100);
      i{
        margin-left: vw(30);
        font-size: vw(50);
        color: #c1c1c1;
      }
    }
    .tit-rg{
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      span{
        transform: translate(vw(-50),vw(2));
        font-size: vw(32);
      }
    }
  }
  .follow-body{
    flex: 1;
    overflow-y: auto;
    background-color: #ffffff;
    .userlist-box{
      height: vw(140);
      display: flex;
      padding: 0 vw(35);
      box-sizing: border-box;
      align-items: center;
      border-bottom: 1px solid #ebedf0;
      .box-le{
        padding-right: vw(20);
        width: vw(100);
        height: vw(100);
        .le-img{
          img{
            width: vw(100);
            height: vw(100);
            border-radius: 50%;
            object-fit: cover;
          }
        }
      }
      .box-rg{
        flex: 1;
        display: flex;
        height: vw(80);
        justify-content: flex-end;
        .rg-le{
          width: vw(400);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          span{
            font-size: vw(32);
            font-weight: 500;
            &:last-child{
              font-size: vw(24);
              font-weight: 300;
              color: #d5d5d5;
            }
          }
        }
        .rg-rg{
          flex: 1;
          display: flex;
          justify-content: center;
          .rg-box{
            span{
              padding: vw(10) vw(20);
              border: 1px solid lightgreen;
              border-radius: vw(20);
              color: lightgreen;
            }
          }
          .rg-box-nofollow{
            span{
              padding: vw(10) vw(20);
              border: 1px solid lightsalmon;
              border-radius: vw(20);
              color: lightsalmon;
            }
          }
          font-size: vw(24);
          line-height: vw(80);
        }
      }
    }
  }
}
</style>
